<template>
	<view class="homer_otograph">
		<!-- <Doublelayerswiper></Doublelayerswiper> -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item , index) in props.banners" :key="item">
					<view class="swiper-item uni-bg-red">
						<a href="#">
							<image style="width: 100%;" class="img" :src='item.imageUrl' alt="" />
						</a>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <image :src="banners[bannersID].imageUrl" /> -->
	</view>
</template>

<script setup>
	
	import { ref , reactive } from "vue";
	const autoplay = ref(true);
	const interval = ref(2000);
	const duration = ref(500);
	// 父组件传过来的值,打印 props.banners
	const props = defineProps(['banners'])
	
</script>

<style scoped>
	.homer_otograph{
		width: 100%;
		height: 100%;
	}
	.uni-margin-wrap {
		/* width: 690rpx; */
		width: 100%;
		height: 100%;
	}
	
	.swiper {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		width: 100%;
		display: block;
		/* height: 300rpx; */
		/* line-height: 300rpx; */
		text-align: center;
	}
	
	.swiper-list {
		width: 100%;
		/* margin-top: 40rpx; */
		margin-bottom: 0;
	}
	.uni-common-mt {
		/* margin-top: 60rpx; */
		position: relative;
	}
	.info {
		position: absolute;
		/* right: 20rpx; */
	}
	.uni-padding-wrap {
		/* width: 550rpx; */
		width: 100%;
		/* padding: 0 100rpx; */
	}
</style>